<template>
  <div class="dashboard-container">
    <!-- 顶部欢迎信息 -->
    <div class="header">
      <div class="welcome-card">
        <div class="welcome-text">早安，Kevin，祝你开心每一天！</div>
        <div class="position-info">产品经理 | 产品研发中心 - 产品策划部</div>
      </div>
    </div>

    <!-- 关键指标卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-title">本月销售收入（元）</div>
        <div class="stat-value">2,837</div>
        <div class="stat-trend">
          <span class="trend-up">月同比 ▲12%</span>
          <span class="trend-down">月环比 ▼11%</span>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-title">本月销售额（元）</div>
        <div class="stat-value">1,256</div>
        <div class="stat-trend">
          <span class="trend-up">月同比 ▲12%</span>
          <span class="trend-down">月环比 ▼11%</span>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-title">商品库存总量</div>
        <div class="stat-value">8,542</div>
        <div class="stat-trend">
          <span class="trend-up">月同比 ▲5%</span>
          <span class="trend-down">月环比 ▼3%</span>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-container">
      <!-- 本周医疗订单 -->
      <div class="chart-card">
        <div class="chart-title">本周医疗订单</div>
        <div class="chart-container" ref="medicalOrdersChart"></div>
      </div>

      <!-- 本周商城销售额 -->
      <div class="chart-card">
        <div class="chart-title">本周商城销售额</div>
        <div class="chart-container" ref="salesChart"></div>
      </div>

      <!-- 商品库存统计 -->
      <div class="chart-card">
        <div class="chart-title">商品库存统计</div>
        <div class="chart-container" ref="inventoryChart"></div>
      </div>

      <!-- 用户统计 -->
      <div class="chart-card">
        <div class="chart-title">用户统计</div>
        <div class="chart-container" ref="userChart"></div>
      </div>
    </div>

    <!-- 底部数据列表 -->
    <div class="data-list">
      <div class="list-title">订单统计</div>
      <div class="data-grid">
        <div class="data-item">
          <div class="data-value">2499笔</div>
          <div class="data-label">挂号订单</div>
          <div class="data-trend trend-up">较上周 ↑ 12%</div>
        </div>

        <div class="data-item">
          <div class="data-value">3471笔</div>
          <div class="data-label">休整订单</div>
          <div class="data-trend trend-up">较上周 ↑ 8%</div>
        </div>

        <div class="data-item">
          <div class="data-value">5783笔</div>
          <div class="data-label">退回订单</div>
          <div class="data-trend trend-up">较上周 ↑ 11%</div>
        </div>

        <div class="data-item">
          <div class="data-value">250万元</div>
          <div class="data-label">挂号销售额</div>
          <div class="data-trend trend-up">较上周 ↑ 12%</div>
        </div>

        <div class="data-item">
          <div class="data-value">347万元</div>
          <div class="data-label">休整销售额</div>
          <div class="data-trend trend-up">较上周 ↑ 8%</div>
        </div>

        <div class="data-item">
          <div class="data-value">578.3万元</div>
          <div class="data-label">退回销售额</div>
          <div class="data-trend trend-up">较上周 ↑ 11%</div>
        </div>
      </div>
    </div>

    <!-- 底部信息 -->
    <div class="footer">
      交易QQ群约2019489，加盟商超过交易ID **[购买店铺]**
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import * as echarts from 'echarts'
import useUserStore from "@/store/modules/user.js";
import {useRouter} from "vue-router";
import axios from "axios";

const userStore = useUserStore()
const router = useRouter()

// 图表引用
const medicalOrdersChart = ref(null)
const salesChart = ref(null)
const inventoryChart = ref(null)
const userChart = ref(null)

// 初始化图表
const initCharts = () => {
  // 本周医疗订单图表
  const medicalOrdersChartInstance = echarts.init(medicalOrdersChart.value)
  axios.get("").then(resp=>{

  })
  medicalOrdersChartInstance.setOption({
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['挂号订单']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['11月16日', '11月17日', '11月18日', '11月19日', '11月20日', '11月21日', '11月22日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '挂号订单',
        type: 'line',
        stack: '总量',
        data: [320, 332, 301, 334, 390, 330, 320],
        smooth: true,
        lineStyle: {
          width: 3
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(58,77,233,0.5)' },
            { offset: 1, color: 'rgba(58,77,233,0.1)' }
          ])
        }
      }
    ]
  })

  // 本周商城销售额图表 - 并列柱状图
  const salesChartInstance = echarts.init(salesChart.value)
  salesChartInstance.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['医疗器械', '保健品', '康复用品', '健康食品']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '医疗器械',
        type: 'bar',
        data: [120, 132, 101, 134, 90, 230, 210],
        color: '#5470c6',
        barWidth: '15%',
        barGap: 0
      },
      {
        name: '保健品',
        type: 'bar',
        data: [220, 182, 191, 234, 290, 330, 310],
        color: '#91cc75',
        barWidth: '15%',
        barGap: 0
      },
      {
        name: '康复用品',
        type: 'bar',
        data: [150, 232, 201, 154, 190, 330, 410],
        color: '#fac858',
        barWidth: '15%',
        barGap: 0
      },
      {
        name: '健康食品',
        type: 'bar',
        data: [320, 332, 301, 334, 390, 330, 320],
        color: '#ee6666',
        barWidth: '15%',
        barGap: 0
      }
    ]
  })

  // 商品库存统计图表
  const inventoryChartInstance = echarts.init(inventoryChart.value)
  inventoryChartInstance.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '库存统计',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 18,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1842, name: '医疗器械' },
          { value: 2132, name: '保健品' },
          { value: 1540, name: '康复用品' },
          { value: 1358, name: '健康食品' },
          { value: 1670, name: '其他商品' }
        ]
      }
    ]
  })

  // 用户统计图表
  const userChartInstance = echarts.init(userChart.value)
  userChartInstance.setOption({
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['新增用户', '活跃用户', '总用户数']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['11月16日', '11月17日', '11月18日', '11月19日', '11月20日', '11月21日', '11月22日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '新增用户',
        type: 'line',
        data: [120, 132, 101, 134, 90, 230, 210],
        smooth: true,
        lineStyle: {
          width: 3
        }
      },
      {
        name: '活跃用户',
        type: 'line',
        data: [220, 182, 191, 234, 290, 330, 310],
        smooth: true,
        lineStyle: {
          width: 3
        }
      },
      {
        name: '总用户数',
        type: 'line',
        data: [320, 332, 301, 334, 390, 330, 320],
        smooth: true,
        lineStyle: {
          width: 3
        }
      }
    ]
  })

  // 响应窗口大小变化
  window.addEventListener('resize', () => {
    medicalOrdersChartInstance.resize()
    salesChartInstance.resize()
    inventoryChartInstance.resize()
    userChartInstance.resize()
  })
}
onMounted(() => {
  // if (userStore.roles.includes('common')) {
  //   router.push('userIndex')
  // }
  initCharts()
});
</script>

<style scoped>
.dashboard-container {
  max-width: 1400px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.welcome-card {
  background: linear-gradient(135deg, #6a82fb, #fc5c7d);
  color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.welcome-text {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 5px;
}

.position-info {
  font-size: 14px;
  opacity: 0.9;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.stat-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.stat-trend {
  display: flex;
  gap: 15px;
  font-size: 13px;
}

.trend-up {
  color: #f56c6c;
}

.trend-down {
  color: #67c23a;
}

.charts-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.chart-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #333;
}

.chart-container {
  height: 300px;
}

.data-list {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.list-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #333;
}

.data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.data-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.data-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.data-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.data-trend {
  font-size: 12px;
}

.trend-up::before {
  content: "▲ ";
}

.trend-down::before {
  content: "▼ ";
}

.footer {
  text-align: center;
  color: #999;
  font-size: 12px;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .charts-container {
    grid-template-columns: 1fr;
  }

  .stats-cards {
    grid-template-columns: 1fr;
  }
}
</style>